<template>
  <div class="rightBodyContent">
    <div class="rightBodyContent-in">
      <el-button type="primary" plain @click="backlist" size="small"><i class="el-icon-back"></i>返回列表</el-button>
      <div class="hearder-search">
        <div class="breadcrumb-container">
          <div class="search_box">
            <el-date-picker
                v-model="value1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                size="small"
                :picker-options="pickerOptions1">
            </el-date-picker>
          </div>
          <el-button type="primary" @click="searchBtn" size="small"><i class="el-icon-search"></i>搜索</el-button>
          <el-button size="small" @click="refreshFn"><i class="el-icon-refresh"></i>重置</el-button>
          <span class="allbook">总 {{ page.total }} 条数据</span>
        </div>
      </div>
      <!--本体列表，数据 -->
      <div class="table-body">
        <div class="table-body-box">
          <el-table
              ref="multipleTable"
              :data="arryList"
              :stripe="tableoption.tableStripe"
              :border="tableoption.tableBorder"
              tooltip-effect="dark"
              style="width: 100%"
              header-cell-class-name="table-text-c"
              cell-class-name="table-text-c">
            <el-table-column
                prop="create_time"
                label="采集日期">
            </el-table-column>
            <el-table-column
                label="视频源">
              <template slot-scope="scope">
                <span class="priveVideo" @click="showVideo(scope.$index)">查看视频</span>
              </template>
            </el-table-column>
            <el-table-column
                prop="remark"
                label="备注">
            </el-table-column>
            <el-table-column
                label="操作">
              <template slot-scope="scope">
                <el-button size="small" @click="handleDetel(scope.$index)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <!--工具条 分页-->
      <el-col :span="24" class="toolbar">
        <el-pagination
            background
            :page-size="page.pagesize"
            :current-page="page.pageindex"
            layout="total, prev, pager, next"
            :total="page.total"
            @current-change="handleSizeChange"></el-pagination>
      </el-col>
    </div>
    <activeVideoDialog :videosrcCheck="videosrcCheck" :visible.sync="dialogvideoVisible"></activeVideoDialog>
  </div>
</template>

<script>
import {pagination, tableoption} from '@/utils/util.js'
import activeVideoDialog from '@/components/dialog/activeVideoDialog.vue'

export default {
  components: {
    activeVideoDialog
  },
  data() {
    return {
      tableoption: tableoption,
      page: {
        pageindex: pagination.pageIndex,
        pagesize: pagination.pageSize,
        total: pagination.total
      },
      arryList: [], // 数据列表
      // 搜索
      searWord: {
        start_time: '',
        end_time: ''
      },
      value1: '',
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now() + 8.64e7
        }
      },
      videosrcCheck: '',
      dialogvideoVisible: false,
    }
  },
  created() {
    this.searWord.type = this.$route.query.type
    console.log('视频路由器：',this.$route.query.editId)
    this.InitFn()
  },
  methods: {
    // 初始化
    InitFn() {
      let option = JSON.parse(JSON.stringify(this.searWord))
      option.p = this.page.pageindex
      option.corner_id = this.$route.query.editId
      this.$post(this.api.corner.video.list, option).then((response) => {
        if (response.code === 0) {
          this.arryList = response.list.data
          this.page.total = response.list.total
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 分页
    handleSizeChange(val) {
      this.page.pageindex = val
      this.InitFn()
    },
    handleSelectionChange(val) {
      this.handleSelection = val
    },
    // 搜索
    searchBtn() {
      this.page.pageindex = 1
      if (this.value1) {
        this.searWord.start_time = this.value1[0]
        this.searWord.end_time = this.value1[1]
      } else {
        this.searWord.start_time = ''
        this.searWord.end_time = ''
      }
      this.InitFn()
    },
    // 刷新页面
    refreshFn() {
      this.page.pageindex = 1
      this.searWord.start_time = ''
      this.searWord.end_time = ''
      this.value1 = ''
      this.InitFn()
    },
    backlist() {
      this.$router.go(-1)
    },
    showVideo(index) {
      this.videosrcCheck = this.arryList[index].video
      this.dialogvideoVisible = true
    },
    handleDetel(index) {
      let this_ = this
      this.$confirm('此操作将永久删除内容, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        closeOnClickModal: false,
        type: 'warning'
      }).then(() => {
        this_.deletFn(index)
      }).catch(() => {
      })
    },
    deletFn(index) {
      this.$post(this.api.corner.video.delete, {
        id: this.arryList[index].id
      }).then((response) => {
        if (response.code === 0) {
          this.$message.success('删除成功!')
          this.InitFn()
        } else {
        }
      }).catch((err) => {
        console.log(err)
      })
    },
  },
  mounted() {
  }
}
</script>
<style scoped>
.priveVideo:hover {
  text-decoration: underline;
  color: #1b8de5;
  cursor: pointer;
}
</style>
